<template>
    <el-dialog center width="90%"
               :visible="submitPreviewVisible"
               @close="linkModeBool" @open="uapdaModeData" slot="title">
        <div slot="title" style="margin-bottom: 34px;">
            <span class="labelName" style="color: #333333;font-size: 20px">申请单</span>
            <span class="labelName" style="color: #333333;font-size: 20px">Application form</span>
        </div>
        <div class="formPrompt-head">
            <div style="margin: 10px 0 10px 10px">
            <span class="formBorder"></span>
            <span class="formPrompt-title">创建信息 Creator Information</span>
        </div>
        </div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="140px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item prop="email">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">申请单号 :</span>
                            <span class="labelName">Doc.# :</span>
                        </div>
                        <el-input readonly v-model="applyNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="创建人">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">创建人 :</span><br/>
                            <span class="labelName">Creator :</span>
                        </div>
                        <el-input readonly v-model="ruleForm.applyUser"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="创建时间">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">创建时间 :</span>
                            <span class="labelName">Create Date :</span>
                        </div>
                        <el-input readonly v-model="createDate"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="状态">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">状态 :</span>
                            <span class="labelName">Status :</span>
                        </div>
                        <el-input readonly v-model="status"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="购买机构">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">购买机构 :</span>
                            <span class="labelName">Purchase Campus :</span>
                        </div>
                        <el-select v-model="ruleForm.organizationId" disabled  placeholder="">
                            <el-option
                                v-for="(item, index) in organizationList"
                                :key="index"
                                :label="item.organizationName"
                                :value="item.organizationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="购买部门 ">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">购买部门 :</span>
                            <span class="labelName">Purchase Dept :</span>
                        </div>
                        <el-select v-model="ruleForm.workGroupId" disabled placeholder="">
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :label="item.description"
                                :value="item.flexValueId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="购买类型 ">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">购买类型 :</span>
                            <span class="labelName">Purchase Type :</span>
                        </div>
                        <el-select v-model="ruleForm.purchaseTypeId" disabled  placeholder="">
                            <el-option
                                v-for="(item, index) in departmentList"
                                :key="index"
                                :label="item.description"
                                :value="item.flexValueId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="成本中心">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">成本中心 :</span>
                            <span class="labelName">Cost Center :</span>
                        </div>
                        <el-input readonly v-model="costCenter"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="email" label="交付地点 ">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">交付地点 :</span>
                            <span class="labelName">Delivery Address :</span>
                        </div>
                        <el-select v-model="ruleForm.deliverySiteId" disabled  placeholder="">
                            <el-option
                                v-for="(item, index) in deliverySiteByOrgList"
                                :key="index"
                                :label="item.locationCode"
                                :value="item.locationId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="email" label="申请理由">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">申请理由 :</span>
                            <span class="labelName">Create Reason :</span>
                        </div>
                        <el-input readonly v-model="ruleForm.costCenter"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="补单">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">补单 :</span>
                            <span class="labelName">Supplementary :</span>
                        </div>
                        <el-checkbox disabled v-model="ruleForm.makeup"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="email" label="紧急">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">紧急 :</span>
                            <span class="labelName">Urgent :</span>
                        </div>
                        <el-checkbox disabled v-model="ruleForm.urgent"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="email" label="实际收货地址">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">实际收货地址 :</span>
                            <span class="labelName">Actual Address :</span>
                        </div>
                        <el-input readonly v-model="ruleForm.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="ruleForm.changeReason !== null">
                    <el-form-item prop="email" label="更改原因">
                        <div slot="label" style="line-height: 20px">
                            <span class="labelName">更改原因 :</span>
                            <span class="labelName">Change Reason :</span>
                        </div>
                        <el-input readonly v-model="ruleForm.changeReason"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
            :data="previewTableData" border
            tooltip-effect="dark"
            style="width: 100%;text-align: center">
            <el-table-column
                fixed="left"
                 prop="itemNum"
                 label="物资编码,Item Code"
                min-width="120px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="itemDescription"
                label="物资描述,Item Description"
                min-width="260px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="quantityBasedOnMoq"
                label="最小订货量,MOQ"
                min-width="120px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="quantity"
                label="数量,Quantity"
                min-width="150px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="costCenter"
                label="成本中心,Cost Center"
                min-width="260px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="requiredDate"
                label="需求日期,Required Date"
                min-width="260px" :render-header="renderHeader">
            </el-table-column>
        </el-table>
        <PaginationMode :pageData="previewPageData" @onPageChange="onPageChange" />
        <div slot="footer" class="dialog-footer">
            <el-button @click="linkModeBool">导出</el-button>
            <el-button type="primary" @click="submitApplication">确认提交</el-button>
        </div>
    </el-dialog>
</template>
<style scoped>
    .labelName{
        float: right;
        width: 100%;
    }
    .formPrompt-head{
        color: #fff;
    }
    .formBorder{
        width: 14px;
        height: 14px;
        background: #15a732;
        display: inline-block;
        line-height: 29px;
        margin: 0 8px;
        border-radius: 50%;
    }
    .formPrompt-title{
        font-size: 20px;
        color: rgb(21, 167, 50);
    }
</style>
<script>
import {UserHelper} from "../../helpers/UserHelper";
import { TimeUtil } from '@eku/eku-tools';
import bus, {TYPES} from "../../common/bus";
import { applicationMaterialList, getApplyUpdate } from "../../../components/axios/url";
import http from "../../../components/axios/fetch";
import PaginationMode from '../../common/Pagination.vue';

import renderHeader from '../../common/renderHeader.js';

const Cookie = require('js-cookie');

    export default{
        components: {
            PaginationMode,
        },
        props: {
            submitPreviewVisible: null,
            applyNo: '',
            applyId: '',
        },
        data(){
            return {
                applyNoNum: this.applyNo,
                status: '新建',
                createDate: null,
                costCenter: UserHelper.getUserCostCenter() || Cookie.get('userCostCenter'),
                ruleForm: {},
                previewTableData: [],
                previewPageData: {},
                page: 1,
                organizationList: [], // 购买机构下拉列表
                departmentList: [], // 部门下拉列表
                purchaseTypeList: [], // 购买类型下拉列表
                deliverySiteByOrgList: [], // 交付地点下拉列表
                noteDescribeVisible: false, // 是否加入常用物料单
                reviewStatus: null, // 判断是否有更改原因
            }
        },
        created(){
            bus.$on(TYPES.updataApplicationForm, (data)=>{
                this.ruleForm = data.ruleForm;
                this.organizationList = data.organizationList;
                this.departmentList = data.departmentList;
                this.purchaseTypeList = data.purchaseTypeList;
                this.deliverySiteByOrgList = data.deliverySiteByOrgList;
                this.reviewStatus = data.reviewStatus || null
            });

        },
        methods:{
            renderHeader: renderHeader,
            uapdaModeData() { // 打开弹窗执行的方法
                this.getMaterialList();
                let urrentcTime = new Date().getTime(); // 当前日期
                this.createDate = TimeUtil.formatDate(urrentcTime, 'yyyy-MM-dd HH:mm:ss')

            },
            submitApplication() {  // 提交
                let ruleForm = this.ruleForm
                if(ruleForm && ruleForm.workGroupId === null) {
                    this.$notify({ title: '提示', message: '请选择部门', type: 'warning' });
                    return;
                }
                if(ruleForm && ruleForm.purchaseTypeId === null) {
                    this.$notify({ title: '提示', message: '请选择购买类型', type: 'warning' });
                    return;
                }
                if(ruleForm && ruleForm.deliverySiteId === null)  {
                    this.$notify({ title: '提示', message: '请选择交付地点', type: 'warning' });
                    return;
                }
                if(this.reviewStatus && ruleForm.changeReason === null) {
                    this.$notify({ title: '提示', message: '请输入更改原因', type: 'warning' });
                    return;
                }
                if(this.previewTableData && this.previewTableData.length === 0) {
                    this.$notify({ title: '提示', message: '请选择物资', type: 'warning' });
                    return;
                }

                let time = new Date().getTime(); // 当前日期
                let param = {
                    id: this.applyId,
                    applyTime: TimeUtil.formatDate(time, 'yyyy-MM-dd HH:mm:ss'),
                    ...ruleForm,
                    status: 2,
                };

                try{
                    http.post(getApplyUpdate, param).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.linkModeBool(); // 关闭预览弹窗
                            this.$notify({ title: '提示', message: '提交成功', type: 'success' });
                            this.$emit('showPromptSubmit') // 显示是否加入常用物料单
                        }
                    })
                }catch(error){
                    this.$notify.error({ title: '提示', message: '网络错误' });
                }
            },
            async getMaterialList() { // 列表请求
                try{
                    let res=  await http.post(applicationMaterialList, {
                        page: this.page,
                        applyId: this.applyId
                    })

                    if(res.data && res.data.resultMess === "success") {
                        this.previewTableData = res.data.data.list
                        this.previewPageData = res.data.data.page
                    }
                } catch (e){
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }

            },
            onPageChange(page) { // 分页
                this.getMaterialList({page});
            },
            linkModeBool() { // 关闭弹窗
                this.$emit('CloseSubmitPreview')
            },
        }
    }
</script>
